<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="专业的教育平台" />
    <meta name="Keywords" content="教育,培训,学习" />
    <title>学成在线</title>
    <!-- 引入网站的标题 -->
    <link href="favicon.ico" rel="shortcut icon" />
    <!-- 引入基础CSS样式文件 -->
    <link href="./css/base.css" rel="stylesheet" />
    <link href="./css/index.css" rel="stylesheet" />
</head>
<body>
    <!-- 头部  start -->
    <header>
        <!-- logo  -->
        <div class="logo">
            <a href="#" title="学成在线首页">学生在线</a>
        </div>

        <!-- nav  -->
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </nav>

        <!-- search  -->
        <div class="search">
            <input type="search" name="query" placeholder="请输入关键字"><button></button>
        </div>

        <!-- 个人中心  -->
        <div class="personal">
            <span>个人中心</span>
            <span class="alarm">
                <img src="./images/ld.png" width="14px" height="16px" alt="">
                <span></span>
            </span>
            <span class="avatar">
                <img src="./images/pic.png" width="33px" height="33px" alt="">
                刘德华 Andy
            </span>
        </div>
    </header> 
    <!-- 头部  end -->

    <!-- Banner  start -->
    <div class="banner">
        <div class="inner">
            <!-- 左侧导航栏 -->
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                    <li><a href="#">前端开发 <span> > </span></a></li>
                </ul>
            </div>

            <!-- 圆点 -->
            <ul class="circle">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul> 

            <!-- 课程表 -->
            <div class="classbook">
                <dl>
                    <dt>我的课程表</dt>
                    <dd>
                        <ul>
                            <li>
                                <h5>继续学习 程序语言设计</h5>
                                <p>正在学习 - 使用对象</p>
                            </li>
                            <li>
                                <h5>继续学习 程序语言设计</h5>
                                <p>正在学习 - 使用对象</p>
                            </li>
                            <li>
                                <h5>继续学习 程序语言设计</h5>
                                <p>正在学习 - 使用对象</p>
                            </li>
                        </ul>
                        <a href="#" class="all">全部课程</a>
                    </dd>
                </dl>
            </div> 
        </div>
    </div> 
    <!-- Banner  end -->
    <!-- Recommend start -->
     <div class="Recommend">
        <div class="pf">精品推荐</div>
           <ul>
                   <li><a href="#">jQuery </a></li>
                   <li><a href="#">jQuery  </a></li>
                   <li><a href="#">jQuery  </a></li>
                   <li><a href="#">jQuery  </a></li>
                   <li><a href="#">jQuery  </a></li>
                   <li><a href="#">jQuery  </a></li>
                   <li><a href="#">jQuery  </a></li>
                   <li><a href="#">jQuery  </a></li>
                   <li><a href="#">jQuery  </a></li>
                   <li><a href="#">jQuery  </a></li>
            </ul>
            <span class="alter">
                <a href="#" title="修改兴趣">修改兴趣</a>
            </span>
     </div>
     <!-- Recommend end -->
    <!-- products start-->

  <div class="products">
  <div class="title">
    <span>精品推荐</span>
    <a href="#" title="查看全部">查看全部</a>
  </div>
  <div class="products2">
    <!-- 每个产品卡片 -->
    <div class="p1">
      <img src="./images/pic1.png" alt="">
      <div class="info">
        <p class="line1">Think PHP 5.0 博客系统实战</p>
        <p class="line2">项目演练</p>
        <p class="line3">
          <span class="level">高级</span>
          <span class="dot"></span>
          <span class="learners">1125人正在学习</span>
        </p>
      </div>
    </div>
      <div class="p1">
      <img src="./images/pic1.png" alt="">
      <div class="info">
        <p class="line1">Think PHP 5.0 博客系统实战</p>
        <p class="line2">项目演练</p>
        <p class="line3">
          <span class="level">高级</span>
          <span class="dot"></span>
          <span class="learners">1125人正在学习</span>
        </p>
      </div>
    </div>
     <div class="p1">
      <img src="./images/pic1.png" alt="">
      <div class="info">
        <p class="line1">Think PHP 5.0 博客系统实战</p>
        <p class="line2">项目演练</p>
        <p class="line3">
          <span class="level">高级</span>
          <span class="dot"></span>
          <span class="learners">1125人正在学习</span>
        </p>
      </div>
    </div>
     <div class="p1">
      <img src="./images/pic1.png" alt="">
      <div class="info">
        <p class="line1">Think PHP 5.0 博客系统实战</p>
        <p class="line2">项目演练</p>
        <p class="line3">
          <span class="level">高级</span>
          <span class="dot"></span>
          <span class="learners">1125人正在学习</span>
        </p>
      </div>
    </div>
     <div class="p1">
      <img src="./images/pic1.png" alt="">
      <div class="info">
        <p class="line1">Think PHP 5.0 博客系统实战</p>
        <p class="line2">项目演练</p>
        <p class="line3">
          <span class="level">高级</span>
          <span class="dot"></span>
          <span class="learners">1125人正在学习</span>
        </p>
      </div>
    </div>

  </div>

<div class="products2">
    <!-- 每个产品卡片 -->
    <div class="p1">
      <img src="./images/pic1.png" alt="">
      <div class="info">
        <p class="line1">Think PHP 5.0 博客系统实战</p>
        <p class="line2">项目演练</p>
        <p class="line3">
          <span class="level">高级</span>
          <span class="dot"></span>
          <span class="learners">1125人正在学习</span>
        </p>
      </div>
    </div>
      <div class="p1">
      <img src="./images/pic1.png" alt="">
      <div class="info">
        <p class="line1">Think PHP 5.0 博客系统实战</p>
        <p class="line2">项目演练</p>
        <p class="line3">
          <span class="level">高级</span>
          <span class="dot"></span>
          <span class="learners">1125人正在学习</span>
        </p>
      </div>
    </div>
     <div class="p1">
      <img src="./images/pic1.png" alt="">
      <div class="info">
        <p class="line1">Think PHP 5.0 博客系统实战</p>
        <p class="line2">项目演练</p>
        <p class="line3">
          <span class="level">高级</span>
          <span class="dot"></span>
          <span class="learners">1125人正在学习</span>
        </p>
      </div>
    </div>
     <div class="p1">
      <img src="./images/pic1.png" alt="">
      <div class="info">
        <p class="line1">Think PHP 5.0 博客系统实战</p>
        <p class="line2">项目演练</p>
        <p class="line3">
          <span class="level">高级</span>
          <span class="dot"></span>
          <span class="learners">1125人正在学习</span>
        </p>
      </div>
    </div>
     <div class="p1">
      <img src="./images/pic1.png" alt="">
      <div class="info">
        <p class="line1">Think PHP 5.0 博客系统实战</p>
        <p class="line2">项目演练</p>
        <p class="line3">
          <span class="level">高级</span>
          <span class="dot"></span>
          <span class="learners">1125人正在学习</span>
        </p>
      </div>
    </div>

  </div>
</div>
     <!-- products end-->
    <!-- footer start -->
    <div  class="footer">
        <div class="left">
            <div class="logo1">
                <a href="#" title="学成在线首页">学生在线</a>
            </div>
            <div class="text">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p>
                 <p>2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
            </div>
            <div>
                 <button class="custom-button">下载APP</button>
            </div>

        </div>

        <div class="right">
            <ul>
                <li class="title">关于学成网</li>
                <li ><a href="#">关于</a></li>
                <li ><a href="#">管理团队</a></li>
                <li ><a href="#">工作机会</a></li>
                <li ><a href="#">客户服务</a></li>
                <li ><a href="#">帮助</a></li>
            </ul>
             <ul>
                <li class="title">关于学成网</li>
                <li ><a href="#">关于</a></li>
                <li ><a href="#">管理团队</a></li>
                <li ><a href="#">工作机会</a></li>
                <li ><a href="#">客户服务</a></li>
                <li ><a href="#">帮助</a></li>
            </ul>
             <ul>
              <li class="title">关于学成网</li>
                <li ><a href="#">关于</a></li>
                <li ><a href="#">管理团队</a></li>
                <li ><a href="#">工作机会</a></li>
                <li ><a href="#">客户服务</a></li>
                <li ><a href="#">帮助</a></li>
            </ul>
        </div>
    </div>
      <!-- footer end -->
</body>
</html>